<template>
	<view class="l-steps" :class="classes">
		<slot></slot>
	</view>
</template>
<script lang="ts">
	// @ts-nocheck
	import { defineComponent, ref, computed, provide } from '@/uni_modules/lime-shared/vue';
	import stepsProps from './props';
	import {StepsProvide} from './type';
	
	export default defineComponent({
		name: 'l-steps',
		props: stepsProps,
		emits: ['change', 'input', 'update:modelValue'],
		setup(props, {emit}) {
			const name = 'l-steps'
			const modelValue = ref(0)
			const current = computed({
				set(value: number) {
					modelValue.value = value;
					emit('change', value)
					emit('update:modelValue', value)
					// #ifdef VUE2
					emit('input', value)
					// #endif
				},
				get():number {
					return props.current || props.modelValue || modelValue.value
				}
			} as WritableComputedOptions<number>)
			
			const classes = computed(()=>{
				let cls = ''
				
				cls += `${name}--${props.layout} `
				cls += `${name}--${props.sequence} `
				cls += props.readonly ? `${name}--readonly`: ''
				
				return cls
			})
			
			const children = ref<number[]>([])
			const relation = (child: number) =>{
				children.value.push(child)
			}
			const removeRelation = (child: number) => {
				children.value = children.value.filter((item):boolean => item != child)
			}
			const onClickItem = (cur: number) =>{
				current.value = cur
			}
			
			provide('limeSteps', {
				props,
				current,
				children,
				onClickItem,
				relation,
				removeRelation
			} as StepsProvide)
			
			return {
				classes
			}
		}
	})
</script>
<style lang="scss">
	@import './index';
</style>

